<script lang="ts" setup>
import { getListSelfRated, ReviewItemType } from '@/api/userInfo'
import dayjs from 'dayjs'
import ScrollSpy from 'sard-uniapp/components/scroll-spy/scroll-spy.vue'
import PullDownRefresh from 'sard-uniapp/components/pull-down-refresh/pull-down-refresh.vue'
import type { LoadMoreState } from 'wot-design-uni/components/wd-loadmore/types'

defineOptions({ name: 'PopScoreList' })
const show = ref(false)
const fetchState = ref<LoadMoreState>('loading')
const loading = ref(false)
const totalCount = ref(0)
const queryParam = reactive({
  pageNo: 1,
  pageSize: 10,
})
const tableData = ref<ReviewItemType[]>([])
/**
 * type: regular | refresh | loadMore
 */
const getListData = async (type = 'regular') => {
  loading.value = true
  if (type === 'refresh') {
    queryParam.pageNo = 1
    tableData.value = []
    fetchState.value = 'loading'
  }
  if (fetchState.value === 'finished') {
    loading.value = false
    return
  }
  if (type === 'loadMore') {
    queryParam.pageNo += 1
  }
  try {
    const { list, total } = await getListSelfRated(queryParam)
    totalCount.value = total
    tableData.value = [...tableData.value, ...(list ?? [])]
    // tableData.value = Array.from({ length: 20 }, (v,i)=>list[0])

    if (tableData.value.length >= total) {
      fetchState.value = 'finished'
    }
  } finally {
    loading.value = false
  }
}
const open = () => {
  getListData()
  show.value = true
}

const handleClose = () => {
  show.value = false
}
const pull_down_refresh = ref()
const onScroll = (event: any) => {
  pull_down_refresh.value?.enableToRefresh(event.detail.scrollTop === 0)
}
const onScrolltoupper = () => {
  pull_down_refresh.value?.enableToRefresh(true)
}
defineExpose({
  open,
})
</script>

<template>
  <JediPagePop v-model="show" title="客户评价" @close="handleClose">
    <view class="h-full overflow-y-auto">
      <scroll-spy
        root-style="height: 100%;"
        @scrolltolower="getListData('loadMore')"
        @scroll="onScroll"
        @scrolltoupper="onScrolltoupper"
      >
        <PullDownRefresh
          ref="pull_down_refresh"
          :loading="loading"
          @refresh="getListData('refresh')"
        >
          <template v-if="tableData.length">
            <view v-for="item in tableData" :key="item.bizId" class="scoreItem">
              <view class="flex justify-between">
                <view class="flex gap-2">
                  <wd-img :width="48" :height="48" :src="item.evaluatorAvatar">
                    <template #error>
                      <view
                        class="w-12 h-12 rounded-full flex justify-center items-center bg-gray-300"
                      >
                        {{
                          item.evaluatorName
                            ? item.evaluatorName.substring(0, 1)
                            : ''
                        }}
                      </view>
                    </template>
                    <template #loading>
                      <view class="loading-wrap">
                        <wd-loading />
                      </view>
                    </template>
                  </wd-img>
                  <view class="flex flex-col">
                    <text>{{ item.evaluatorName }}</text>
                    <text class="text-sm text-gray-400">
                      {{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}
                    </text>
                  </view>
                </view>
                <view>
                  <wd-rate :model-value="item.rate" />
                </view>
              </view>
              <view class="mt-1 pl-14">
                {{ item.content }}
              </view>
            </view>
          </template>
          <JediEmpty v-if="!tableData.length && !loading" image="comment" tip="暂无评价" />
          <wd-loadmore
            v-if="tableData.length && totalCount > 5"
            :state="fetchState"
            finished-text="已全部加载"
            @reload="getListData"
          />
        </PullDownRefresh>
      </scroll-spy>
    </view>
  </JediPagePop>
</template>

<style lang="scss" scoped>
.scoreItem {
  border-bottom: 1px solid #f1f1f1;
  padding: 24rpx;
}
</style>
